<template>
  <div>
    <a-input ref="input" />
    <a-divider />
    <ul style="text-align: left">
      <!-- 
      当在 v-for 中使用模板引用时，相应的ref引用中包含的值是一个数组
      应该注意的是，ref 数组并不保证与源数组相同的顺序。
     -->
      <li v-for="(item, index) in dataList" ref="items" :key="index">
        {{ item }}
      </li>
    </ul>
    <a-divider />
    <!-- 会在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数 -->
    <!-- 当绑定的元素被卸载时，函数也会被调用一次，此时的 el 参数会是 null。你当然也可以绑定一个组件方法而不是内联函数 -->
    <a-input
      :ref="
        (el) => {
          message(el);
        }
      "
    />
    <a-divider />
    <MyComponent ref="Child"></MyComponent>
    <a-button type="primary" @click="ChildFunction"
      >使用子组件中的方法</a-button
    >
  </div>
</template>

<script>
/**
 * 到插件部分再调整为全局方法
 */
import MyNotification from "../../../components/MyNotification";
import MyComponent from "./MyComponent.vue";
export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      dataList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    };
  },
  methods: {
    ChildFunction() {
      this.$refs.Child.telYouMyName();
      /**
       * 自组件可以限制父组件可以访问自己的哪些方法，telMeYourName 方法没有在可访问方法的数组内
       * TypeError: this.$refs.Child.telMeYourName is not a function
       */
      this.$refs.Child.telMeYourName();
    },
    message(el) {
      MyNotification.info("消息", el == null ? "卸载" : "生成");
    },
  },
  mounted() {
    this.$refs.input.focus();
    this.$nextTick(() => {
      console.log(this.$refs.items);
    });
  },
};
</script>

<style></style>
